<template>
  <div class="h-full pb-60 m-relative">
    <div class="p-20 h-full overflow-y-auto">
      <a-form ref="formRef" :model="form" size="medium" auto-label-width>
        <a-form-item label="提现账号">
          <div class="line-h-32">
            <div class="flex-col" v-if="info?.accountInfo.type == 1">
              <span>法人：{{ info?.accountInfo?.accountName ?? '--' }}</span>
              <span>支付宝：{{ info?.accountInfo?.accountNumber ?? '--' }}</span>
            </div>
            <div class="flex-col" v-else-if="info?.accountInfo.type == 2">
              <span>法人：{{ info?.accountInfo?.accountName ?? '--' }}</span>
              <span>银行卡：{{ info?.accountInfo?.accountNumber ?? '--' }}</span>
            </div>
            <div class="flex-col" v-else-if="info?.accountInfo.type == 3">
              <span>户名：{{ info?.accountInfo.accountName ?? '--' }}</span>
              <span>对公账户：{{ info?.accountInfo?.accountNumber ?? '--' }} </span>
              <span>开户行：{{ info?.accountInfo?.bankName ?? '--' }} </span>
            </div>
            <div v-else>--</div>
          </div>
        </a-form-item>
        <a-form-item label="提现金额">
          <div class="font-bold">￥{{ info?.amount ?? 0 }}</div>
        </a-form-item>
        <a-form-item label="发票信息">
          <div class="flex flex-a-c" v-if="info.fInfo">
            <img src="/src/assets/images/ofd.png" v-if="info.fInfo.url.toLowerCase().includes('ofd')" style="width: 18px;height: 18px;display: inline-block;"></img>
            <img src="/src/assets/images/pdf.png" v-else style="width: 18px;height: 18px;display: inline-block;"></img>
            <span class="ml-10">{{ info.fInfo.name }}<span class="text-theme cursor-pointer ml-10" @click="onDown(info)">下载</span></span>
          </div>
          <div v-else class="font-bold">
            待提交
          </div>
        </a-form-item>
        <a-form-item field="status" label="审核结果"  
        :rules="  [{ required: true, message: '请选择审核结果' }]"
        :validate-trigger="['change',]">
          <a-radio-group v-model="form.status">
            <a-radio :value="20" v-if="props.params.status!=0">通过</a-radio>
            <a-radio :value="30" v-if="props.params.status!=0">拒绝</a-radio>
            <a-radio :value="40">退回余额</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item field="refuseReason" label="审核备注" v-if="props.params.status!=0 && form.status!=20 ">
          <a-textarea
            :auto-size="{
              minRows: 6,
              maxRows: 10
            }"
            :max-length="100"
            show-word-limit
            v-model="form.refuseReason"
            placeholder="请输入备注"
          />
        </a-form-item>
        <div class="flex flex-a-c" v-if="props.params.status==0" style="color: rgba(255, 0, 84, 1)">
          <icon-exclamation-circle-fill :size="22" />
          <span class="font-bold ml-6" style="font-size: 17px;">确认将用户该笔提现操作取消，并且退回到可提现余额？</span>
        </div>
      </a-form>
      <div class="m-absolute border-box b-0 l-0 r-0 h-60 flex flex-a-c bt-f0 px-20 flex-j-e">
        <a-space  v-if="props.params.status==0">
          <a-button :loading="loading" @click="onOk">确定</a-button>
          <a-button type="primary" @click="props.onClose(0)">取消</a-button>
        </a-space>
        <a-space v-else>
          <a-button @click="props.onClose(0)">取消</a-button>
          <a-button type="primary" :loading="loading" @click="onOk">提交</a-button>
        </a-space>
      </div>
    </div>
  </div>
</template>

<script setup>
import { transferInvoiceAudit } from '@/apis'
import { Message } from '@arco-design/web-vue'
import download from 'downloadjs'

const props = defineProps(['params', 'onClose'])

const info = ref(props.params)
const formRef = ref()
const loading = ref(false)
const form = reactive({
  id: undefined,
  status: undefined,
  refuseReason: undefined
})

// 获取文件名
const getFileName = (url)=> {
    // 使用正则匹配文件名部分
    const match = url.match(/([^/]+\.[^/]+)$/);
    return {
      name:match ? match[0] : null,
      url:url
    }
}

onMounted(() => {
  if(props.params.invoiceFileUrl){
    info.value.fInfo = getFileName(props.params.invoiceFileUrl)
  }
  if(props.params.status==0) form.status = 40
  form.id = props.params.id
})


const getFileType = (extension)=> {
  const imageExtensions = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
  const txtExtensions = ['txt'];
  const excelExtensions = ['xls', 'xlsx'];
  const wordExtensions = ['doc', 'docx'];
  const pdfExtensions = ['pdf'];
  const pptExtensions = ['ppt', 'pptx'];
  const videoExtensions = ['mp4', 'm2v', 'mkv', 'rmvb', 'wmv', 'avi', 'flv', 'mov', 'm4v'];
  const radioExtensions = ['mp3', 'wav', 'wmv'];

  if (imageExtensions.includes(extension)) return 'image';
  if (txtExtensions.includes(extension)) return 'txt';
  if (excelExtensions.includes(extension)) return 'excel';
  if (wordExtensions.includes(extension)) return 'word';
  if (pdfExtensions.includes(extension)) return 'pdf';
  if (pptExtensions.includes(extension)) return 'ppt';
  if (videoExtensions.includes(extension)) return 'video';
  if (radioExtensions.includes(extension)) return 'radio';

  return 'other';
}

const onDown = async(record)=>{
  const url = record.fInfo.url
  const strFileName = record.fInfo.name
  const type = strFileName.split('.')[1]
  const strMimeType =  getFileType(type)
  let xmlHttp = null;
  if (window.ActiveXObject) {
      // IE6, IE5 浏览器执行代码
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } else if (window.XMLHttpRequest) {
      // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
      xmlHttp = new XMLHttpRequest();
  }
  //2.如果实例化成功，就调用open（）方法：
  if (xmlHttp != null) {
      xmlHttp.open("get", url, true);
      xmlHttp.responseType = 'blob';//关键
      xmlHttp.send();
      xmlHttp.onreadystatechange = doResult; //设置回调函数
}
  function doResult() {
    if (xmlHttp.readyState == 4) { //4表示执行完成
        if (xmlHttp.status == 200) { //200表示执行成功
            download(xmlHttp.response, strFileName, strMimeType);
        }
      }
  }
}
// 点击确认添加/编辑
const onOk = async () => {
  const validateResult = await formRef.value?.validate()
  if (validateResult) return false
  try {
    loading.value = true
    const validateResult = await formRef.value?.validate()
    if (validateResult) return false
    await transferInvoiceAudit({ ...form })
    Message.success('操作成功')
    props.onClose()
  } finally {
    loading.value = false
  }
}

provide('formRef', formRef)
</script>
